<template>
  <view>
    <div class="coupon" :style="{ 'background-image': 'url(' + calcBackgroundImage + ')'}">
      <div class="left"><span class="left_one">￥</span><span class="left_two">{{ props.coupon.couponValue }}</span>
      </div>
      <div class="content">
        <p style="font-size: 34rpx;">{{ props.coupon.couponName }}</p>
        <p style="font-size: 26rpx;margin-top: 6rpx;">{{ props.coupon.createAt }}</p>
      </div>
      <div class="right" :class="props?.coupon?.status>1?'black':''" @click="$emit('toUse')">
        {{ text || use[props?.coupon?.status] }}
      </div>
    </div>
  </view>
</template>

<script setup>
import {computed} from 'vue';

defineEmits('toUse')
const props = defineProps(['coupon', 'isCouponStatus', 'text'])
const calcBackgroundImage = computed(() => {
  return props?.coupon?.status < 2 ? '/static/imgAll/优惠券.png' : '/static/imgAll/优惠券_过期.png'
})
const use = {
  "0": "去使用",
  "1": "查看订单",
  "2": "已过期",
}
</script>

<style lang="scss" scoped>
.coupon {
  margin-top: 24rpx;
  height: 158rpx;
  width: 684rpx;
  border-radius: 20rpx;
  background-color: rgb(250, 138, 152);
  display: flex;
  color: white;
  font-size: 24rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;

  .left {
    width: 150rpx;
    height: 100%;
    text-align: center;
    line-height: 160rpx;

    .left_one {
      font-size: 36rpx;
    }

    .left_two {
      font-size: 70rpx;
      margin-left: -8rpx;
    }
  }

  .content {
    margin-left: 30rpx;
    flex: 1;
  }

  .right {
    height: 57rpx;
    width: 156rpx;
    background-color: white;
    color: #FE5067;
    font-size: 28rpx;
    text-align: center;
    line-height: 57rpx;
    border-radius: 28.5rpx;
    margin: 0rpx 12rpx;
  }

  .black {
    color: black;
  }
}
</style>